<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class与style</title>
    <script src="lib/vue.js"></script>
</head>
<style>
    .red {
        background-color: red;
    }

    .yellow {
        background-color: yellow;
    }

    .classA {
        background-color: violet;
    }

    .classB {
        font-size: 22px;
    }
</style>

<body>
    <div id="box">
        <button @click="handleClick()">动态Class切换</button>
        <div :class="isActive?'red':'yellow'">动态绑定class-三目运算写法</div>


        <!-- 对象写法 -->
        <div :class="classsObj">对象写法</div>

        <!-- 数组写法 -->
        <div :class="classArr">数组写法</div>


        <!-- 行内样式-style -->
        <div :style="'background:'+(isActive?'pink':'deeppink')">style-三目写法</div>

        <!-- style-对象写法 -->
        <div :style="styleObj">style-对象写法</div>

        <!-- style-数组写法 -->
        <div :style="styleArr">style-数组写法</div>

    </div>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                isActive: true,
                classsObj: {
                    classA: true,
                    classB: true
                },
                classArr: ["classA", "classB"],
                styleObj: {
                    background: "green",
                    fontSize: "22px"
                },
                styleArr: [{
                    backgroundColor: "red"
                }, {
                    fontSize: "24px"
                }]
            },
            methods: {
                handleClick() {
                    this.isActive = !this.isActive
                }
            }
        })
    </script>

</body>

</html>